{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="password-change" style="background-image: url('{% static 'images/change-password.png' %}');">
    <div class="password-change-form">
        <h2>修改密码</h2>
        <form id="changePasswordForm" method="post" action="{% url 'change_password' %}">
          {% csrf_token %}
          <!-- 旧密码 -->
          <div class="form-group">
            <!-- 在HTML中，<label>标签的for属性用于将标签与特定的表单元素绑定。
                具体来说，for属性的值应与目标表单元素的id属性值完全一致。
                当用户点击带有for属性的<label>文本时，浏览器会自动将焦点移动到对应的表单控件上，提升操作便捷性。 -->
              <label for="old_password">当前密码:</label>
              <input type="password" id="old_password" name="old_password" required>
          </div>
          <!-- 新密码 -->
          <div class="form-group">
              <label for="new_password1">新密码:</label>
              <input type="password" id="new_password1" name="new_password1" required>
          </div>
          <!-- 确认新密码 -->
          <div class="form-group">
              <label for="new_password2">确认新密码:</label>
              <input type="password" id="new_password2" name="new_password2" required>
          </div>
          <button type="submit" >修改密码</button>
      </form>
    </div>
</div> 

<script>

function showAlert(title, text) {
        Swal.fire({
        icon: 'error',
        title: title,
        text: text,
        });
    }

function validateForm() {
    var currentPassword = document.getElementById('old_password').value;
    var newPassword = document.getElementById('new_password1').value;
    var confirmPassword = document.getElementById('new_password2').value;
    if (currentPassword === '') {
            showAlert('Oops...', '原始密码不能为空');
            return false;
        }
        
    if (newPassword === '') {
        showAlert('Oops...', '新密码不能为空');
        return false;
    }

    if (confirmPassword === '' || newPassword !== confirmPassword) {
        showAlert('Oops...', '新密码和确认密码不一致');
        return false;
    }

    return true; // 显式返回 true 表示验证通过
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单的正常提交
        if (!validateForm()) return;
        // 使用 fetch API 发送数据
        let formData = new FormData(form);
        fetch("{% url 'change_password' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': formData.get('csrfmiddlewaretoken')  // 确保添加 CSRF 令牌
            }
        }).then(response => response.json())
          .then(data => {
            if (data.status === 'error') {
                console.log(data)
                let messages = JSON.parse(data.messages);
                // 构造错误信息的文本
                let errorMessage = '';
                for (const field in messages) {
                    if (messages.hasOwnProperty(field)) {
                        messages[field].forEach(error => {
                            errorMessage += `<li style="color:red;text-align:left;margin-left: 100px;">${field}: ${error.message}</li>`;
                        });
                    }
                }
                // 使用 SweetAlert2 显示错误信息
                Swal.fire({
                    icon: 'error',
                    title: '提交错误',
                    html: `<ul>${errorMessage}</ul>`,
                    confirmButtonText: '关闭'
                });
            } else {
                // 处理成功的情况
                Swal.fire({
                    icon: 'success',
                    title: '操作成功',
                    text: '数据已成功提交！'
                }).then((result) => {
                    if (result.value) {
                        // 用户点击了“确定”，刷新父页面
                        window.parent.location.reload();
                    }
                });
            }
        }).catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: '网络错误',
                text: '无法连接到服务器，请稍后再试。',
                confirmButtonText: '关闭'
            });
        });
    });
});

</script>

{% endblock %}